import React from 'react';
import { Card, Statistic, Typography } from 'antd';
import { WalletOutlined } from '@ant-design/icons';

const { Title } = Typography;

const PointsOverview = ({ pointsBalance, loading }) => {
  return (
    <Card className="points-overview-card">
      <div className="points-overview-content">
        <div className="points-header">
          <WalletOutlined className="points-icon" />
          <Title level={3} style={{ margin: 0, color: '#1890ff' }}>
            我的积分
          </Title>
        </div>
        
        <div className="points-balance">
          <Statistic
            value={pointsBalance}
            precision={2}
            loading={loading}
            valueStyle={{ 
              color: '#52c41a', 
              fontSize: '2.5rem',
              fontWeight: 'bold'
            }}
            suffix="分"
          />
        </div>
        
        <div className="points-description">
          <p style={{ color: '#666', margin: 0 }}>
            积分可通过局域网结算和资源销售分成获得
          </p>
        </div>
      </div>
    </Card>
  );
};

export default PointsOverview; 